﻿@{
	ViewBag.Title = "人力资源档案登记主表";
}
<script src="~/lib/vue/dist/vue.global.js"></script>
<script src="~/lib/axios/dist/axios.js"></script>
<link href="~/lib/element-plus/dist/index.css" rel="stylesheet" />
<script src="~/lib/element-plus/dist/index.full.js"></script>

<div id="app">

	<div class="table-container">
		<table :model="khbh" class="tableEdit">
			<thead>
				<tr>
					<td colspan="10">您正在做的业务是：人力资源--人力资源档案管理--人力资源档案登记</td>
				</tr>
			</thead>

			<tr v-if="dengji">
				<th>
					档案编号
				</th>
				<td colspan="10" rowspan="1">
					<input type="text" v-model="khbh.HumanId" class="dabh" />
				</td>
			</tr>
			<tr>
				@* <th>I级机构</th>
				<td>

					<el-select v-model="khbh.FirstKindName" placeholder="请选择" :disabled="isReadOnly" v-on:change="CFSKName()">
						<el-option v-for="option in firstKindOptions"
								   :key="option.firstKindId"
								   :label="option.firstKindName"
								   :value="option.firstKindName">
						</el-option>
					</el-select>

				</td> *@
				<td width="11%" class="TD_STYLE1">
					I级机构
				</td>
				<td width="14%" class="TD_STYLE2">
					<el-select v-model="khbh.FirstKindName" placeholder="请选择" :disabled="isReadOnly" v-on:change="CFSKName()">
						<el-option v-for="option in firstKindOptions"
								   :key="option.firstKindId"
								   :label="option.firstKindName"
								   :value="option.firstKindName">
						</el-option>
					</el-select>
				</td>
				@* <th>II级机构</th>
				<td>
					<el-select v-model="khbh.SecondKindName" placeholder="请选择" :disabled="isReadOnly" v-on:change="CFTKName()">
						<el-option v-for="option in aw"
								   :key="option.secondKindId"
								   :label="option.secondKindName"
								   :value="option.secondKindName">
						</el-option>
					</el-select>

				</td>
				<th>III级机构</th>
				<td>

					<el-select v-model="khbh.ThirdKindName" :disabled="isReadOnly" placeholder="请选择">
						<el-option v-for="option in sanji"
								   :key="option.thirdKindId"
								   :label="option.thirdKindName"
								   :value="option.thirdKindName">
						</el-option>
					</el-select>
				</td> *@
				<td width="11%" class="TD_STYLE1">
					II级机构
				</td>
				<td width="14%" class="TD_STYLE2">
					<el-select v-model="khbh.SecondKindName" placeholder="请选择" :disabled="isReadOnly" v-on:change="CFTKName()">
						<el-option v-for="option in aw"
								   :key="option.secondKindId"
								   :label="option.secondKindName"
								   :value="option.secondKindName">
						</el-option>
					</el-select>
				</td>
				<td width="11%" class="TD_STYLE1">
					III级机构
				</td>
				<td class="TD_STYLE2" colspan="2">
					<el-select v-model="khbh.ThirdKindName" :disabled="isReadOnly" placeholder="请选择">
						<el-option v-for="option in sanji"
								   :key="option.thirdKindId"
								   :label="option.thirdKindName"
								   :value="option.thirdKindName">
						</el-option>
					</el-select>
				</td>
				@*rowspan占级行/colspan占几列/align="center"属性,可以使内容水平居中  *@
				<td rowspan="5" align="center" colspan="2">
					<el-form-item label="" prop="imageUrl">
						<div class="avatar-uploader">
							<img v-if="chargeForm.imageUrl" :src="chargeForm.imageUrl" class="avatar" />
							<el-icon v-else class="avatar-uploader-icon">+</el-icon>
							<el-upload :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" class="el-upload">
								<!-- 可以在这里添加上传文件的 input 控件 -->
							</el-upload>
						</div>
					</el-form-item>
				</td>

			<tr>
				@* <th>职位分类</th>
				<td>
					<el-select v-model="khbh.HumanMajorKindId" :disabled="isReadOnly" placeholder="请选择" v-on:change="CMName()">
						<el-option v-for="option in zwfl"
								   :key="option.majorKindId"
								   :label="option.majorKindName"
								   :value="option.majorKindName">
						</el-option>
					</el-select>
				</td>
				<th>职位名称</th>
				<td>
					<el-select v-model="khbh.HumanMajorKindName" :disabled="isReadOnly" placeholder="请选择">
						<el-option v-for="option in zwmc"
								   :key="option.majorId"
								   :label="option.majorName"
								   :value="option.majorName">
						</el-option>
					</el-select>
				</td>
				<th>职称</th>
				<td>
					<el-select v-model="khbh.HumanProDesignation" placeholder="请选择">
						<el-option v-for="option in zhicheng"
								   :key="option.attributeKind"
								   :label="option.attributeName"
								   :value="option.attributeName">
						</el-option>
					</el-select>
				</td> *@
				<td class="TD_STYLE1">
					职位分类
				</td>
				<td class="TD_STYLE2">
					<el-select v-model="khbh.HumanMajorKindId" :disabled="isReadOnly" placeholder="请选择" v-on:change="CMName()">
						<el-option v-for="option in zwfl"
								   :key="option.majorKindId"
								   :label="option.majorKindName"
								   :value="option.majorKindName">
						</el-option>
					</el-select>
				</td>
				<td class="TD_STYLE1">
					职位名称
				</td>
				<td class="TD_STYLE2">
					<el-select v-model="khbh.HumanMajorKindName" :disabled="isReadOnly" placeholder="请选择">
						<el-option v-for="option in zwmc"
								   :key="option.majorId"
								   :label="option.majorName"
								   :value="option.majorName">
						</el-option>
					</el-select>
				</td>
				<td class="TD_STYLE1">
					职称
				</td>
				<td colspan="2" class="TD_STYLE2">
					<el-select v-model="khbh.HumanProDesignation" placeholder="请选择">
						<el-option v-for="option in zhicheng"
								   :key="option.attributeKind"
								   :label="option.attributeName"
								   :value="option.attributeName">
						</el-option>
					</el-select>
				</td>
			</tr>

			<tr>
				<td class="TD_STYLE1">
					姓名
				</td>
				<td >
					<el-input v-model="khbh.HumanName" />
				</td>
				<td class="TD_STYLE1">
					性别
				</td>
				<td class="TD_STYLE2">
					<el-select v-model="khbh.HumanSex" placeholder="请选择">
						<!-- 静态选项 -->
						<el-option label="男" value="男"></el-option>
						<el-option label="女" value="女"></el-option>
					</el-select>
				</td>
				<td class="TD_STYLE1">
					EMAIL
				</td>
				<td colspan="2" class="TD_STYLE2">
					<el-input v-model="khbh.HumanEmail" />
				</td>
				@* <th>姓名</th>
				<td>
					<input type="text" v-model="khbh.HumanName" />
				</td>
				<th>性别</th>
				<td>
					<el-select v-model="khbh.HumanSex" placeholder="请选择">
						<!-- 静态选项 -->
						<el-option label="男" value="男"></el-option>
						<el-option label="女" value="女"></el-option>
					</el-select>
				</td>
				<th>EMAIL</th>
				<td>
					<input type="text" v-model="khbh.HumanEmail" />
				</td> *@
			</tr>
			<tr>
				<td class="TD_STYLE1">
					电话
				</td>
				<td class="TD_STYLE2">
					<el-input v-model="khbh.HumanTelephone" />
				</td>
				<td class="TD_STYLE1">
					QQ
				</td>
				<td class="TD_STYLE2">
					<el-input v-model="khbh.HumanQQ" />
				</td>
				<td class="TD_STYLE1">
					手机
				</td>
				<td colspan="2" class="TD_STYLE2">
					<el-input v-model="khbh.HumanMobilephone" />
				</td>
			</tr>
			@* <tr>
				<th>电话</th>
				<td>
					<input type="text" v-model="khbh.HumanTelephone" />
				</td>
				<th>QQ</th>
				<td>
					<input type="text" v-model="khbh.HumanQQ" />
				</td>
				<th>手机</th>
				<td>
					<input type="text" v-model="khbh.HumanMobilephone" />
				</td>
			</tr> *@

			@* <tr>
				<th>住址</th>
				<td colspan="3">
					<input type="text" v-model="khbh.HumanAddress" class="sfz" />
				</td>
				<th>邮编</th>
				<td>
					<input type="text" v-model="khbh.HumanPostcode" />
				</td>
			</tr> *@
			<tr>
				<td class="TD_STYLE1">
					住址
				</td>
				<td colspan="3" class="TD_STYLE2">
					<el-input v-model="khbh.HumanAddress" class="sfz" />
				</td>
				<td class="TD_STYLE1">
					邮编
				</td>
				<td colspan="2" class="TD_STYLE2">
					<el-input v-model="khbh.HumanPostcode" />
				</td>
			</tr>

			@* <tr>
				<th>国籍</th>
				<td>
					<el-select v-model="khbh.HumanNationality" placeholder="请选择">
						<el-option v-for="option in zp"
								   :key="option.attributeKind"
								   :label="option.attributeName"
								   :value="option.attributeName">
						</el-option>
					</el-select>
				</td>
				<th>出生地</th>
				<td>
					<input type="text" v-model="khbh.HumanBirthplace" />
				</td>
				<th>生日</th>
				<td>
					<input type="text" v-model="khbh.HumanBirthday" />
				</td>
				<th>民族</th>
				<td>
					<el-select v-model="khbh.HumanRace" placeholder="请选择">
						<el-option v-for="option in mz"
								   :key="option.attributeKind"
								   :label="option.attributeName"
								   :value="option.attributeName">
						</el-option>
					</el-select>
				</td>
			</tr> *@
			<tr>
				<td class="TD_STYLE1">
					国籍
				</td>
				<td class="TD_STYLE2">
					<el-select v-model="khbh.HumanNationality" placeholder="请选择">
						<el-option v-for="option in zp"
								   :key="option.attributeKind"
								   :label="option.attributeName"
								   :value="option.attributeName">
						</el-option>
					</el-select>
				</td>
				<td class="TD_STYLE1">
					出生地
				</td>
				<td class="TD_STYLE2">
					<el-input v-model="khbh.HumanBirthplace" />
				</td>
				<td class="TD_STYLE1">
					生日
				</td>
				<td width="16%" class="TD_STYLE2">
					<el-input v-model="khbh.HumanBirthday"  />
				</td>
				<td width="11%" class="TD_STYLE1">
					民族
				</td>
				<td class="TD_STYLE2" width="14%">
					<el-select v-model="khbh.HumanRace" placeholder="请选择">
						<el-option v-for="option in mz"
								   :key="option.attributeKind"
								   :label="option.attributeName"
								   :value="option.attributeName">
						</el-option>
					</el-select>
				</td>
			</tr>

			@* <tr>
				<th>宗教信仰</th>
				<td>
					<el-select v-model="khbh.HumanReligion" placeholder="无">
						<el-option v-for="option in xy"
								   :key="option.attributeKind"
								   :label="option.attributeName"
								   :value="option.attributeName">
						</el-option>
					</el-select>
				</td>
				<th>政治面貌</th>
				<td>
					<el-select v-model="khbh.HumanParty" placeholder="请选择">
						<el-option v-for="option in mm"
								   :key="option.attributeKind"
								   :label="option.attributeName"
								   :value="option.attributeName">
						</el-option>
					</el-select>
				</td>
				<th>身份证号码</th>
				<td>
					<input type="text" v-model="khbh.HumanIdCard" />
				</td>
				<th>社会保障号码</th>
				<td>
					<input type="text" v-model="khbh.HumanSocietySecurityId" />
				</td>
			</tr> *@
			<tr>
				<td class="TD_STYLE1">
					宗教信仰
				</td>
				<el-select v-model="khbh.HumanReligion" placeholder="请选择">
					<el-option v-for="option in xy"
							   :key="option.attributeKind"
							   :label="option.attributeName"
							   :value="option.attributeName">
					</el-option>
				</el-select>
				<td class="TD_STYLE1">
					政治面貌
				</td>
				<td class="TD_STYLE2">
					<el-select v-model="khbh.HumanParty" placeholder="请选择">
						<el-option v-for="option in mm"
								   :key="option.attributeKind"
								   :label="option.attributeName"
								   :value="option.attributeName">
						</el-option>
					</el-select>
				</td>
				<td class="TD_STYLE1">
					身份证号码
				</td>
				<td class="TD_STYLE2">
					<el-input v-model="khbh.HumanIdCard" />
						@* v-on:input="getHumanBirthday" *@
				</td>
				<td class="TD_STYLE1">
					社会保障号码
				</td>
				<td class="TD_STYLE2">
					<el-input v-model="khbh.HumanSocietySecurityId" />
				</td>
			</tr>

			<tr>
				@* <th>年龄</th>
				<td>
					<input type="text" v-model="khbh.HumanAge" />
				</td> *@
				<td class="TD_STYLE1">
					年龄
				</td>
				<td class="TD_STYLE2">
					<el-input v-model="khbh.HumanAge" />
				</td>
				<td class="TD_STYLE1">
					学历
				</td>
				<td class="TD_STYLE2">
					<el-select v-model="khbh.HumanEducatedDegree" placeholder="请选择">
						<el-option v-for="option in xl"
								   :key="option.attributeKind"
								   :label="option.attributeName"
								   :value="option.attributeName">
						</el-option>
					</el-select>
				</td>
				<td class="TD_STYLE1">
					教育年限
				</td>
				<td class="TD_STYLE2">
					<el-select v-model="khbh.HumanEducatedYears" placeholder="请选择">
						<el-option v-for="option in jylx"
								   :key="option.attributeKind"
								   :label="option.attributeName"
								   :value="option.attributeName">
						</el-option>
					</el-select>
				</td>
				<td class="TD_STYLE1">
					学历专业
				</td>
				<td class="TD_STYLE2">
					<el-select v-model="khbh.HumanEducatedMajor" placeholder="请选择">
						<el-option v-for="option in xlzy"
								   :key="option.attributeKind"
								   :label="option.attributeName"
								   :value="option.attributeName">
						</el-option>
					</el-select>
				</td>
				@* <th>学历</th>
				<td>
					<el-select v-model="khbh.HumanEducatedDegree" placeholder="请选择">
						<el-option v-for="option in xl"
								   :key="option.attributeKind"
								   :label="option.attributeName"
								   :value="option.attributeName">
						</el-option>
					</el-select>
				</td>
				<th>教育年限</th>
				<td>
					<el-select v-model="khbh.HumanEducatedYears" placeholder="请选择">
						<el-option v-for="option in jylx"
								   :key="option.attributeKind"
								   :label="option.attributeName"
								   :value="option.attributeName">
						</el-option>
					</el-select>
				</td>
				<th>学历专业</th>
				<td>
					<el-select v-model="khbh.HumanEducatedMajor" placeholder="请选择">
						<el-option v-for="option in xlzy"
								   :key="option.attributeKind"
								   :label="option.attributeName"
								   :value="option.attributeName">
						</el-option>
					</el-select>
				</td> *@
			</tr>


			<tr>
				@* <th>薪酬标准</th>
				<td>
					<el-select v-model="khbh.SalaryStandardName" placeholder="请选择">
						<el-option v-for="option in xcbz"
								   :key="option.pbcId"
								   :label="option.attributeName"
								   :value="option.attributeName">
						</el-option>
					</el-select>
				</td> *@
				<td class="TD_STYLE1">
					薪酬标准
				</td>
				<td class="TD_STYLE2">
					<el-select v-model="khbh.SalaryStandardName" placeholder="请选择">
						<el-option v-for="option in xcbz"
								   :key="option.pbcId"
								   :label="option.attributeName"
								   :value="option.attributeName">
						</el-option>
					</el-select>
				</td>
				@* <th>开户行</th>
				<td>
					<input type="text" v-model="khbh.HumanBank" />
				</td>
				<th>账号</th>
				<td>
					<input type="text" v-model="khbh.HumanAccount" />
				</td>
				<th>{{ djr }}</th>
				<td>
					<input type="text" v-model="khbh.Register" />
				</td> *@
				<td class="TD_STYLE1">
					开户行
				</td>
				<td class="TD_STYLE2">
					<el-input v-model="khbh.HumanBank" />
				</td>
				<td class="TD_STYLE1">
					帐号
				</td>
				<td class="TD_STYLE2">
					<el-input v-model="khbh.HumanAccount" />
				</td>
				<td class="TD_STYLE1">
					登记人
				</td>
				<td class="TD_STYLE2">
					<el-input v-model="khbh.Register" readonly />
				</td>
			</tr>

			<tr>
				<td class="TD_STYLE1">
					建档时间
				</td>
				@* <th>{{ jdsj }}</th> *@
				<td>
					<span>{{ formattedCurrentTime }}</span>
				</td>
				@* <td class="TD_STYLE1">
					建档时间
				</td>
				<td class="TD_STYLE2">
					<el-date-picker v-model="aform.RegistTime"
									type="date"
									placeholder="请选择日期"
									format="YYYY/MM/DD"
									value-format="YYYY-MM-DD"
									readonly>
					</el-date-picker>
				</td> *@
				<td class="TD_STYLE1">
					特长
				</td>
				<td class="TD_STYLE2">
					<el-select v-model="khbh.HumanSpeciality" placeholder="请选择">
						<el-option v-for="option in tc"
								   :key="option.attributeKind"
								   :label="option.attributeName"
								   :value="option.attributeName">
						</el-option>
					</el-select>
				</td>
				<td class="TD_STYLE1">
					爱好
				</td>
				<td class="TD_STYLE2">
					<el-select v-model="khbh.HumanHobby" placeholder="请选择">
						<el-option v-for="option in ah"
								   :key="option.attributeKind"
								   :label="option.attributeName"
								   :value="option.attributeName">
						</el-option>
					</el-select>
				</td>
				@* <th>特长</th>
				<td>
					<el-select v-model="khbh.HumanSpeciality" placeholder="请选择">
						<el-option v-for="option in tc"
								   :key="option.attributeKind"
								   :label="option.attributeName"
								   :value="option.attributeName">
						</el-option>
					</el-select>
				</td>
				<th>爱好</th>
				<td>
					<el-select v-model="khbh.HumanHobby" placeholder="请选择">
						<el-option v-for="option in ah"
								   :key="option.attributeKind"
								   :label="option.attributeName"
								   :value="option.attributeName">
						</el-option>
					</el-select>
				</td> *@
			</tr>

			<tr v-if="danganfujian">
					@*	<th>档案附件</th>
				<td colspan="10">
				<input type="file" v-on:change="handleFileChange"/>
				</td>*@

				<th>档案附件</th>
				<td colspan="10">
					<input type="file" v-on:change="handleFileChange" />
					<!-- 显示文件链接 -->
					<a v-if="attachmentUrl" :href="attachmentUrl" target="_blank">查看附件</a>
				</td>

			</tr>


			@* <tr>
				<th>个人履历</th>
				<td colspan="15">
					<textarea v-model="khbh.HumanHistoryRecords" style="resize: none;"></textarea>
				</td>
			</tr>
			<tr>
				<th>家庭关系信息</th>
				<td colspan="10">
					<textarea v-model="khbh.HumanFamilyMembership" style="resize: none;"></textarea>
				</td>
			</tr>

			<tr>
				<th>备注</th>
				<td colspan="10">
					<textarea v-model="khbh.Remark" style="resize: none;"></textarea>
				</td>
			</tr> *@
			<tr>
				<td class="TD_STYLE1">
					个人履历
				</td>
				<td colspan="7" class="TD_STYLE2">
					<textarea v-model="khbh.humanHistoryRecords" rows="4" cols="80" style="resize: none;"></textarea>
				</td>
			</tr>
			<tr>
				<td class="TD_STYLE1">
					家庭关系信息
				</td>
				<td colspan="7" class="TD_STYLE2">
					<textarea v-model="khbh.HumanFamilyMembership" rows="4" cols="80" style="resize: none;"></textarea>
				</td>
			</tr>
			<tr>
				<td class="TD_STYLE1">
					备注
				</td>
				<td colspan="7" class="TD_STYLE2">
					<textarea v-model="khbh.Remark" rows="4" cols="80" style="resize: none;"></textarea>
				</td>
			</tr>

			<tfoot>
				<tr>
					<td colspan="10">
						<input type="button" value="提交" v-if="tj" v-on:click="qd()" />
						<input type="button" v-if="dengji" value="复核通过" v-on:click="fhtg()" />
						<input type="button" v-if="biangeng" value="确认变更" v-on:click="qrbg()" />
						&nbsp;&nbsp;<input type="button" value="清除" v-on:click="qc()" />
						&nbsp;&nbsp;<input type="button" value="返回" v-if="dengji" v-on:click="fh()" />
					</td>

				</tr>
			</tfoot>
		</table>
	</div>
</div>



<script type="text/javascript">
	const { createApp, ref, reactive, onMounted, computed, onBeforeUnmount } = Vue
	var app = createApp({

		setup() {

			const currentTime = ref(new Date());
			//附件
			const selectAttachmentName = ref("");

			//拿到标识
			let PassPassComment = ref("");
			let tj = ref(true); //提交按钮
			//人力资源复核标识
			let selectHfid = ref("");

			const jdsj = ref("建档时间");
			const djr = ref("登记人");

			//登记复核标识
			let dengji = ref(false);
			let danganfujian = ref(false);
			let biangeng = ref(false);
			let selectHufId = ref("");
			const attachmentUrl = ref("");
			const isReadOnly = ref(false);
			

			const khbh = ref({
				//人力资源档案表
				HumanId: "",//档案编号
				FirstKindName: "", //I级机构
				SecondKindName: "",//II级机构
				ThirdKindName: "",//III级机构
				HumanName: "",//姓名
				MajorKindName: "", //职位分类
				MajorName: "",  //职位名称
				HumanProDesignation: "",//职称
				HumanBank: "", //开户行
				HumanEducatedMajor: "",//学历专业
				HumanSex: "",//性别
				HumanMajorKindId: "",//职位分类编号
				HumanMajorKindName: "",//职位分类名称
				HumanEmail: "",//电子邮件
				HumanTelephone: "",//电话
				HumanQQ: "",//QQ
				HumanMobilephone: "",//手机号码
				HumanAddress: "",//住址
				HumanPostcode: "",//邮编
				HumanNationality: "",//国籍
				HumanBirthplace: "",//出生地
				HumanBirthday: "",//年龄
				HumanRace: "",//民族
				HumanReligion: "",//宗教信仰
				HumanParty: "",//政治面貌
				HumanIdCard: "",//身份证号
				HumanSocietySecurityId: "",//社会保障号
				HumanAge: "",//年龄
				HumanEducatedDegree: "",//学历
				HumanEducatedYears: "",//教育年限
				SalaryStandardName: "",//薪酬标准
				HumanAccount: "",//银行账号
				Register: "哈哈哈",//登记人
				HumanSpeciality: "",//特长
				HumanHobby: "",//爱好
				Remark: "",//备注
				HumanFamilyMembership: "",//家庭关系
				HumanHistoryRecords: "",//个人履历

				FirstKindId: "", //I级机构编号
				SecondKindId: "",//II级机构编号
				ThirdKindId: "", //III级机构编号
				HumanMajorKindId: "",//职位分类编号
				HumanMajorId: "",//职位名称编号
				SalaryStandardId: "",//薪酬编号
			})

			//职位分类是否编辑
			let zwxlk = ref(false);
			//职位名称是否编辑
			let zwmcxlk = ref(false);
			// 职位分类编号下拉框选项数据

			let zwfl = ref([]);
			// 职位分类编号下拉框绑定值
			function zwfltKindOptions() {
				axios.get('/EMR/SelectCMK')
					.then(res => {
						//console.info(res)
						zwfl.value = res.data;
					})
					.catch(err => {
						console.info(res);
					})
			}
			//存职位编号
			let zwmc = ref([]);
			function CMName() {
				if (!khbh.value.HumanMajorKindId) {
					return;
				}/*encodeURIComponent(khbh.value.HumanMajorKindId)*/
				axios.get("/EMR/SelectCM2Name?name=" + khbh.value.HumanMajorKindId)
					.then(function (response) {
						zwmc.value = response.data;
						//const foundMajor = zwmc.value.find(option => option.majorName === previousMajorName);
						//if (foundMajor) {
						//	khbh.value.MajorName = foundMajor.majorName;
						//	khbh.value.MajorId = foundMajor.majorId;
						//}
					})
					.catch(function (error) {
						console.error(error);
					});
			}
			//国籍类型下拉框选项数据
			let zp = ref("");
			const fetchZhaoPinOptions = () => {
				axios.get('/EMR/SelectCPCName?name=' + '国籍')
					.then(res => {
						zp.value = res.data;
					})
					.catch(err => {
						console.error(err);
					});
			};
			//民族类型下拉框选项数据
			let mz = ref("");
			const ZhongjiaoOptions = () => {
				axios.get('/EMR/SelectCPCName?name=' + '民族')
					.then(res => {
						mz.value = res.data;
					})
					.catch(err => {
						console.error(err);
					});
			};
			//宗教信仰下拉框选项数据
			let xy = ref("");
			const MingzuOptions = () => {
				axios.get('/EMR/SelectCPCName?name=' + '宗教信仰')
					.then(res => {
						xy.value = res.data;
					})
					.catch(err => {
						console.error(err);
					});
			};

			//政治面貌下拉框选项数据
			let mm = ref("");
			const MianmaoOptions = () => {
				axios.get('/EMR/SelectCPCName?name=' + '政治面貌')
					.then(res => {
						mm.value = res.data;
					})
					.catch(err => {
						console.error(err);
					});
			};

			//学历下拉框选项数据
			let xl = ref("");
			const XueliOptions = () => {
				axios.get('/EMR/SelectCPCName?name=' + '学历')
					.then(res => {
						xl.value = res.data;
					})
					.catch(err => {
						console.error(err);
					});
			};
			//教育年限下拉框选项数据
			let jylx = ref("");
			const JiaoyulianxianOptions = () => {
				axios.get('/EMR/SelectCPCName?name=' + '教育年限')
					.then(res => {
						jylx.value = res.data;
					})
					.catch(err => {
						console.error(err);
					});
			};
			//学历专业下拉框选项数据
			let xlzy = ref("");
			const XlzyOptions = () => {
				axios.get('/EMR/SelectCPCName?name=' + '学历专业')
					.then(res => {
						xlzy.value = res.data;
					})
					.catch(err => {
						console.error(err);
					});
			};
			//特长下拉框选项数据
			let tc = ref("");
			const TcOptions = () => {
				axios.get('/EMR/SelectCPCName?name=' + '特长')
					.then(res => {
						tc.value = res.data;
					})
					.catch(err => {
						console.error(err);
					});
			};
			//爱好下拉框选项数据
			let ah = ref("");
			const AhOptions = () => {
				axios.get('/EMR/SelectCPCName?name=' + '爱好')
					.then(res => {
						ah.value = res.data;
					})
					.catch(err => {
						console.error(err);
					});
			};
			//职称拉框选项数据
			let zhicheng = ref("");
			const zhichengOptions = () => {
				axios.get('/EMR/SelectCPCName?name=' + '职称')
					.then(res => {
						zhicheng.value = res.data;
					})
					.catch(err => {
						console.error(err);
					});
			};
			//薪酬标准下拉框
			let xcbz = ref("");
			const xcbzOptions = () => {
				axios.get('/EMR/SelectCPCName?name=' + '薪酬标准')
					.then(res => {
						xcbz.value = res.data;
					})
					.catch(err => {
						console.error(err);
					});
			};
			// I级下拉框选项数据
			let firstKindOptions = ref([]);
			//I级下拉框绑定值
			function fetchFirstKindOptions() {
				axios.get("/EMR/SelectCFFKName")
					.then(function (response) {
						firstKindOptions.value = response.data;
					})
					.catch(function (error) {
						console.error(error);

					});
			}
			//II级机构名称下拉框选项数据
			let aw = ref([]);
			// II级机构名称下拉框绑定值
			function CFSKName() {
				if (!this.khbh.FirstKindName) {
					return;
				}
				axios.get("/EMR/SelectCFSKName?name=" + khbh.value.FirstKindName)
					.then(function (response) {
						aw.value = response.data;
					})
					.catch(function (error) {
						console.error(error);

					});
			}

			//III级机构名称下拉框选项数据
			let sanji = ref([]);
			//III级机构名称下拉框绑定值
			function CFTKName() {
				if (!this.khbh.SecondKindName) {
					return;
				}
				axios.get("/EMR/SelectCFTKName?name=" + khbh.value.SecondKindName)
					.then(function (response) {
						sanji.value = response.data;
					})
					.catch(function (error) {
						console.error(error);

					});
			}

			// 使用计算属性来格式化时间，包括年月日时分秒
			const formattedCurrentTime = computed(() => {
				const date = currentTime.value;
				const year = date.getFullYear();
				const month = (date.getMonth() + 1).toString().padStart(2, '0');
				const day = date.getDate().toString().padStart(2, '0');
				const hours = date.getHours().toString().padStart(2, '0');
				const minutes = date.getMinutes().toString().padStart(2, '0');
				const seconds = date.getSeconds().toString().padStart(2, '0');
				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			});

			// 更新时间的函数，每秒钟更新一次
			const updateCurrentTime = () => {
				currentTime.value = new Date();
			};


			//文件上传操作
			//function handleFileChange(event) {
			//	const file = event.target.files[0];
			//	if (!file) return;
			//	// Frontend validation
			//	const allowedExtensions = ['.ppt', '.pptx', '.doc', '.docx', '.txt'];
			//	const maxFileSize = 20 * 1024 * 1024; // 20 MB
			//	const fileExtension = file.name.slice(((file.name.lastIndexOf(".") - 1) >>> 0) + 2).toLowerCase();

			//	if (!allowedExtensions.includes(`.${fileExtension}`)) {
			//		alert('Unsupported file type');
			//		return;
			//	}
			//	if (file.size > maxFileSize) {
			//		alert('File size exceeds the limit');
			//		return;
			//	}

			//	const formData = new FormData();
			//	formData.append('file', file);

			//	axios.post('/HRAM/UploadDocument', formData, {
			//		headers: {
			//			'Content-Type': 'multipart/form-data'
			//		},
			//		onUploadProgress: progressEvent => {
			//			const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
			//			console.log(`Upload progress: ${percentCompleted}%`);
			//		}
			//	})
			//		.then(response => {
			//			console.log('File uploaded successfully:', response.data.url);
			//			selectAttachmentName.value = response.data.url;
			//			// Optionally, update the UI with the uploaded file's URL
			//		})
			//		.catch(error => {
			//			console.error('Error uploading file:', error.response ? error.response.data : error.message);
			//			// Optionally, show user-friendly error message
			//		});
			//}

			function handleFileChange(event) {
				const file = event.target.files[0];
				if (!file) return;

				// Frontend validation
				const allowedExtensions = ['.ppt', '.pptx', '.doc', '.docx', '.txt'];
				const maxFileSize = 20 * 1024 * 1024; // 20 MB
				const fileExtension = file.name.slice(((file.name.lastIndexOf(".") - 1) >>> 0) + 2).toLowerCase();

				if (!allowedExtensions.includes(`.${fileExtension}`)) {
					alert('Unsupported file type');
					return;
				}
				if (file.size > maxFileSize) {
					alert('File size exceeds the limit');
					return;
				}

				const formData = new FormData();
				formData.append('file', file);

				axios.post('/HF/UploadDocument', formData, {
					headers: {
						'Content-Type': 'multipart/form-data'
					},
					onUploadProgress: progressEvent => {
						const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
						console.log(`Upload progress: ${percentCompleted}%`);
					}
				})
					.then(response => {
						console.log('File uploaded successfully:', response.data.url);
						this.attachmentUrl = response.data.url; // 更新 URL
					})
					.catch(error => {
						console.error('Error uploading file:', error.response ? error.response.data : error.message);
					});
			}

			//返回人力资源复核表
			function fh() {
				window.location.href = '/HF/HR';
			}


			//进行变更
			function qrbg() {
				axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
				axios.post('/HF/UpdateHF', {
					HufId: selectHufId.value, //主键
					AttachmentName: selectAttachmentName.value,//档案附件
					HumanName: khbh.value.HumanName, //姓名
					HumanAddress: khbh.value.HumanAddress,//地址
					HumanPostcode: khbh.value.HumanPostcode,//邮编
					HumanTelephone: khbh.value.HumanTelephone,//电话
					HumanMobilephone: khbh.value.HumanMobilephone,//手机号码
					HumanBank: khbh.value.HumanBank,//开户行
					HumanAccount: khbh.value.HumanAccount,//银行账号
					HumanQQ: khbh.value.HumanQQ,//QQ号码
					HumanEmail: khbh.value.HumanEmail,//电子邮件
					HumanHobby: this.khbh.HumanHobby,//爱好
					HumanSpeciality: this.khbh.HumanSpeciality,//特长
					HumanSex: this.khbh.HumanSex,//性别
					HumanReligion: this.khbh.HumanReligion,//宗教信仰
					HumanParty: this.khbh.HumanParty,//政治面貌
					HumanNationality: this.khbh.HumanNationality,//国籍
					HumanRace: this.khbh.HumanRace, //民族
					HumanBirthday: khbh.value.HumanBirthday,//出生日期
					HumanBirthplace: khbh.value.HumanBirthplace,//出生地
					HumanAge: khbh.value.HumanAge,//年龄
					HumanEducatedDegree: this.khbh.HumanEducatedDegree,//学历
					HumanEducatedYears: this.khbh.HumanEducatedYears,//教育年限
					HumanEducatedMajor: this.khbh.HumanEducatedMajor,//学历专业
					HumanSocietySecurityId: khbh.value.HumanSocietySecurityId,//社会保障号
					HumanIdCard: khbh.value.HumanIdCard,//身份证号
					Remark: khbh.value.Remark,//备注
					HumanFamilyMembership: khbh.value.HumanFamilyMembership,//家庭关系
					HumanPicture: chargeForm.imageUrl,//相片
					Changer: khbh.value.Register, //变更人
					ChangeTime: new Date(formattedCurrentTime.value).toISOString(), //变更时间
					LastlyChangeTime: new Date(formattedCurrentTime.value).toISOString(),//最近更改时间
				}).then(async function (response) {
					alert("状态更新完成");
					//window.location.href = '/HRAM/HRQ';
				}).catch(function (error) {
					console.error('Error:', error);
				});

			}

			//点击复核通过修修改状态
			function fhtg() {
				////一些非空判断
				//if(selectAttachmentName.value == ""){
				//	alert("需上传附件");
				//	return;
				//}
				//进行修改
				axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
				axios.post('/HF/UpdateHFfuHe', {
					HufId: selectHufId.value, //主键
					AttachmentName: selectAttachmentName.value,//档案附件
					Checker: khbh.value.Register,//档案复核人
					CheckTime: new Date(formattedCurrentTime.value).toISOString(),//档案复核时间
					HumanFileStatus: "复核通过"//档案状态
				}).then(async function (response) {
					alert("状态更新完成");
				}).catch(function (error) {
					console.error('Error:', error);
				});

			}
			//点击确定人力资源档案表的添加
			function qd() {

				//生成档案编号出生日期加11位随机数字
				var sjsz = Math.floor(Math.random() * 90000000000) + 10000000000;
				var idCard = khbh.value.HumanIdCard.trim();
				if (idCard.length === 18) {
					//出生日期
					var birthYear = idCard.substring(6, 10);
					var birthMonth = idCard.substring(10, 12);
					var birthDay = idCard.substring(12, 14);
					var birthday = `${birthYear}${birthMonth}${birthDay}`;
					var bt = "bt" + birthday + "" + sjsz + "";
				}
				//拿到薪酬标准Id
				const xinchou = this.xcbz.find(option => option.attributeName === this.khbh.SalaryStandardName);
				//拿到职位分类编号
				const zhiweicc = this.zwfl.find(option => option.majorKindName === this.khbh.HumanMajorKindId);
				//拿到职位名称编号
				const zhiwemingc = this.zwmc.find(option => option.majorName === this.khbh.HumanMajorKindName);
				////拿到对应下拉框的编号
				const selectedOption = this.firstKindOptions.find(option => option.firstKindName === this.khbh.FirstKindName);
				const selectedO = this.aw.find(option => option.secondKindName === this.khbh.SecondKindName);
				const SanXuanz = this.sanji.find(option => option.thirdKindName === this.khbh.ThirdKindName);
				//alert(selectedOption.firstKindId + "===" + selectedO.secondKindId + "==" +SanXuanz.thirdKindId);
				//alert(zhiwemingc.majorId + "++++++++" + zhiweicc.majorKindId)
				//alert(xinchou.pbcId);

				//人力资源档案表的添加
				axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
				axios.post('/HF/Addhf', {
					HumanId: bt,//档案编号
					FirstKindId: selectedOption.firstKindId,//I级机构编号
					FirstKindName: this.khbh.FirstKindName,//I级机构名称
					SecondKindId: selectedO.secondKindId,//II级机构编号
					SecondKindName: this.khbh.SecondKindName,//II级机构名称
					ThirdKindId: SanXuanz.thirdKindId,//III级机构编号
					ThirdKindName: this.khbh.ThirdKindName,//III级机构名称
					HumanName: khbh.value.HumanName, //姓名
					HumanAddress: khbh.value.HumanAddress,//地址
					HumanPostcode: khbh.value.HumanPostcode,//邮编
					HumanProDesignation: this.khbh.HumanProDesignation,//职称
					HumanMajorKindId: zhiweicc.majorKindId,//职位分类编号
					HumanMajorKindName: this.khbh.HumanMajorKindId, //职位分类名称
					HumanMajorId: zhiwemingc.majorId,//职位名称编号
					HumanMajorName: this.khbh.HumanMajorKindName,//职位名称
					HumanTelephone: khbh.value.HumanTelephone,//电话
					HumanMobilephone: khbh.value.HumanMobilephone,//手机号码
					HumanBank: khbh.value.HumanBank,//开户行
					HumanAccount: khbh.value.HumanAccount,//银行账号
					HumanQQ: khbh.value.HumanQQ,//QQ号码
					HumanEmail: khbh.value.HumanEmail,//电子邮件
					HumanHobby: this.khbh.HumanHobby,//爱好
					HumanSpeciality: this.khbh.HumanSpeciality,//特长
					HumanSex: this.khbh.HumanSex,//性别
					HumanReligion: this.khbh.HumanReligion,//宗教信仰
					HumanParty: this.khbh.HumanParty,//政治面貌
					HumanNationality: this.khbh.HumanNationality,//国籍
					HumanRace: this.khbh.HumanRace, //民族
					HumanBirthday: khbh.value.HumanBirthday,//出生日期
					HumanBirthplac: khbh.value.HumanBirthplace,//出生地
					HumanAge: khbh.value.HumanAge,//年龄
					HumanEducatedDegree: this.khbh.HumanEducatedDegree,//学历
					HumanEducatedYears: this.khbh.HumanEducatedYears,//教育年限
					HumanEducatedMajor: this.khbh.HumanEducatedMajor,//学历专业
					HumanSocietySecurityId: khbh.value.HumanSocietySecurityId,//社会保障号
					HumanIdCard: khbh.value.HumanIdCard,//身份证号
					Remark: khbh.value.Remark,//备注
					SalaryStandardId: xinchou.pbcId,//薪酬标准编号
					SalaryStandardName: this.khbh.SalaryStandardName,//薪酬标准名称
					HumanFamilyMembership: khbh.value.HumanFamilyMembership,//家庭关系
					HumanPicture: chargeForm.imageUrl,//相片
					Register: khbh.value.Register,//档案登记人
					RegistTime: new Date(formattedCurrentTime.value).toISOString(),//档案登记时间
					HumanFileStatus: "待复核",//档案状态
				}).then(function (response) {
					alert("添加成功!");
				})
					.catch(function (error) {
						console.error(error);
					});
			}


			// 在组件挂载时开始定时更新
			onMounted(() => {
				// 每秒钟更新一次时间
				setInterval(updateCurrentTime, 1000);
				//职位分类下拉框
				zwfltKindOptions();
				//国籍下拉框
				fetchZhaoPinOptions();
				//民族下拉框
				MingzuOptions();
				//宗教信仰
				ZhongjiaoOptions();
				//政治面貌下拉框
				MianmaoOptions();
				//学历下拉框
				XueliOptions();
				//教育年限下拉框
				JiaoyulianxianOptions();
				//学历专业下拉框
				XlzyOptions();
				//特长下拉框
				TcOptions();
				//爱好下拉框
				AhOptions();
				//职称下拉框
				zhichengOptions();
				//薪酬标准下拉框
				xcbzOptions();
				//I级机构下拉框榜值
				fetchFirstKindOptions();
				// 获取当前页面的查询参数
				const queryParams = new URLSearchParams(window.location.search);
				// 创建一个空对象来存储解析后的数据
				let rowData = {};
				// 遍历查询参数并解析到 rowData 对象中
				for (const [key, value] of queryParams) {
					// 解码 key 和 value，并存储到 rowData 中
					rowData[decodeURIComponent(key)] = decodeURIComponent(value);
				}


				selectHfid.value = rowData.HFid;
				selectHufId.value = rowData.hufId;

				//(rowData.passPassComment == "通过")
				if (rowData != null) {
					//录用审批为通过的数据
					khbh.value.HumanMajorKindId = rowData.humanMajorKindName;
					khbh.value.HumanMajorKindName = rowData.hunmaMajorName; //职位名称
					khbh.value.HumanName = rowData.humanName;
					khbh.value.HumanSex = rowData.humanSex;
					khbh.value.HumanEmail = rowData.email; //邮箱
					khbh.value.HumanTelephone = rowData.humanTelephone; //电话
					khbh.value.HumanAddress = rowData.humanAddress;  //住址
					khbh.value.HumanPostcode = rowData.humanPostcode; //邮编
					khbh.value.HumanNationality = rowData.humanNationality; //国籍
					khbh.value.HumanBirthplace = rowData.humanBirthplace;//出生地
					khbh.value.HumanBirthday = rowData.humanBirthday;  //生日不需要添加到数据库但需要填写完身份证之后自动赋值
					khbh.value.HumanRace = rowData.humanRace;//民族
					khbh.value.HumanReligion = rowData.humanReligion;//宗教信仰
					khbh.value.HumanParty = rowData.humanParty; //政治面貌
					khbh.value.HumanIdCard = rowData.humanIdcard;//身份证号
					khbh.value.HumanAge = rowData.humanAge;//年龄
					khbh.value.HumanEducatedDegree = rowData.humanEducatedDegree; //学历
					khbh.value.HumanEducatedYears = rowData.humanEducatedYears;//教育年限
					khbh.value.HumanEducatedMajor = rowData.humanEducatedMajor;//学历专业
					khbh.value.HumanSpeciality = rowData.humanSpeciality;//特长
					khbh.value.HumanHobby = rowData.humanHobby;//爱好
					chargeForm.imageUrl = rowData.humanPicture;//头像地址
					khbh.value.HumanMobilephone = rowData.humanMobilephone; //手机
					khbh.value.HumanHistoryRecords = rowData.humanHistoryRecords;//个人履历
					//如果有值就刷新一遍职位下拉框
					CMName();
				}


				if (selectHfid.value != null) {

					//人力资源档案表数据
					//chargeForm.imageUrl = rowData.humanPicture;
					khbh.value.HumanId = rowData.humanId;//档案编号
					khbh.value.HumanMajorKindName = rowData.humanMajorName; //职位名称
					khbh.value.Remark = rowData.remark;//备注
					khbh.value.HumanFamilyMembership = rowData.humanFamilyMembership;//家庭关系
					khbh.value.FirstKindName = rowData.firstKindName;//I级机构
					khbh.value.SecondKindName = rowData.secondKindName;//II级机构
					khbh.value.ThirdKindName = rowData.thirdKindName;//III级机构
					khbh.value.HumanProDesignation = rowData.humanProDesignation;//职称
					khbh.value.HumanEmail = rowData.humanEmail; //邮箱
					khbh.value.HumanQQ = rowData.humanQQ; //QQ号
					khbh.value.HumanIdCard = rowData.humanIdCard; //身份证号

					khbh.value.HumanSocietySecurityId = rowData.humanSocietySecurityId; //社会保障号
					khbh.value.SalaryStandardName = rowData.salaryStandardName; //薪酬标准
					khbh.value.HumanBank = rowData.humanBank; //开户行
					khbh.value.HumanAccount = rowData.humanAccount; //账号

					khbh.value.FirstKindId = rowData.firstKindId;
					khbh.value.SecondKindId = rowData.secondKindId;
					khbh.value.ThirdKindId = rowData.thirdKindId;
					khbh.value.HumanMajorKindId = rowData.humanMajorKindId;
					khbh.value.HumanMajorId = rowData.humanMajorId;
					khbh.value.SalaryStandardId = rowData.salaryStandardId;

					isReadOnly.value = true;
					//档案附件
					danganfujian.value = true;
					if (selectHfid.value == 1) {
						jdsj.value = "复核时间";
						djr.value = "复核人";
						tj.value = false;
						dengji.value = true;

					} else if (selectHfid.value == 2) {
						jdsj.value = "变更时间";
						djr.value = "变更人";
						tj.value = false;
						biangeng.value = true;
					}
				}
				
				// 现在 rowData 对象包含了从上一个页面传递过来的数据
				console.log(rowData);
				console.log("================================+++===================================");
			});

			// 在组件销毁前清除定时器
			onBeforeUnmount(() => {
				clearInterval(updateCurrentTime);
			});



			const handleAvatarSuccess = (res, file) => {
				chargeForm.imageUrl = res.data.url;
				console.log(res.data.url + "+" + chargeForm.imageUrl);
			};
			//信息的收集
			let chargeForm = reactive({
				imageUrl: '',
			})
			const beforeAvatarUpload = async (rawFile) => {
				try {
					let formData = new FormData();
					formData.append('file', rawFile);
					let res = await axios.post('/HF/Upload', formData); // Example endpoint, adjust as per your server setup
					handleAvatarSuccess(res, rawFile);
				} catch (error) {
					console.error('Upload failed:', error);
					ElMessage.error('上传失败，请稍后重试');
					return false;
				}
			};

			return {
				khbh,
				formattedCurrentTime,
				zwfl,
				zwfltKindOptions,
				zwmc,
				CMName,
				zwmcxlk,
				zwxlk,
				fetchZhaoPinOptions,
				zp,
				MingzuOptions,
				mz,
				ZhongjiaoOptions,
				xy,
				MianmaoOptions,
				mm,
				XueliOptions,
				xl,
				JiaoyulianxianOptions,
				jylx,
				XlzyOptions,
				xlzy,
				TcOptions,
				tc,
				AhOptions,
				ah,
				zhichengOptions,
				zhicheng,
				xcbzOptions,
				xcbz,
				CFTKName,
				sanji,
				CFSKName,
				aw,
				firstKindOptions,
				fetchFirstKindOptions,
				PassPassComment,
				handleAvatarSuccess,
				chargeForm,
				beforeAvatarUpload,
				qd,
				selectHfid,
				dengji,
				jdsj,
				djr,
				tj,
				fh,
				fhtg,
				handleFileChange,
				selectHufId,
				selectAttachmentName,
				danganfujian,
				attachmentUrl,
				biangeng,
				qrbg,
				isReadOnly,
			}

		}
	});
	app.use(ElementPlus)
	app.mount('#app')

</script>

<style scoped>


	.avatar-uploader .avatar {
		width: 178px;
		height: 178px;
		display: block;
		border: 1px dashed var(--el-border-color);
		border-radius: 6px;
		cursor: pointer;
		transition: var(--el-transition-duration-fast);
		text-align: center;
		line-height: 178px;
	}

		.avatar-uploader .avatar:hover {
			border-color: var(--el-color-primary);
		}

	.el-icon.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		text-align: center;
		line-height: 178px; /* 垂直居中 */
	}

	.avatar-uploader .el-upload {
		border: 1px dashed var(--el-border-color);
		opacity: 0;
		position: absolute;
		top: 0;
		left: 0;
		width: 178px;
		height: 178px;
		z-index: 2;
		transition: var(--el-transition-duration-fast);
	}

	.table-container {
		position: relative; /* 确保内部元素定位相对于该容器 */
		margin-bottom: 20px; /* 根据需要调整间距 */
		height: 100vh; /* 视口高度 */
		overflow-y: auto; /* 允许垂直滚动 */
	}

	.t {
		height: 500px;
	}

	#app {
		width: 1200px;
		height: auto;
	}

	.zhuzhi {
		width: 400px;
	}

	.sfz {
		width: 280px;
	}

	body {
		font-size: 12px;
	}

	a {
		text-decoration: none;
	}
/* 
	input[type='text'] {
		border: solid 1px black;
		width: 80%;
	}
 */
	textarea {
		border: solid 1px black;
		width: 1100px;
		height: 80px;
	}

	.tableEdit {
		border: solid 1px #f4f4f4;
		border-collapse: collapse;
		width: 100%;
		/*margin: 25px;*/
		height: 500px;
	}

		.tableEdit th {
			text-align: right;
			padding: 4px 7px;
			border: solid 1px #f4f4f4;
			width: 100px;
			background-color: #f4f4f4;
		}

		.tableEdit td {
			text-align: left;
			padding: 4px 7px;
			border: solid 1px #f4f4f4;
		}

		.tableEdit thead {
			border: solid 1px #f4f4f4;
			/* background-color: #FFD553; */
			padding: 4px;
			font-weight: bold;
		}

</style>
